<template>
    <div class="askPeople_detail">
        <div class="question" >
            <div class="ask-qt">
                <div class="ask-icon">问</div>
                <div class="ask-word"> {{info.content}}</div>
            </div>
            <div class="ask-time">
                提问于{{info.gmtCreated}}
            </div>
            
        </div>
        <div class="answer-item">
            <div  class="answer" 
                v-for="(item,index) in askArr" 
                :key="index">
                <div class="userinfo">
                    <div class="avatar"><img :src="item.avatarUrl" alt=""></div>
                    <div class="user-desc">
                        <div class="user-name">{{item.userName}}</div>
                        <div class="user-time">{{item.gmtCreated}}</div>
                    </div>
                </div>
                <div class="usercontent">
                    {{item.content}}
                </div>
            </div>
            <div
                v-if="!askArr.length"
                class="no-data"
            >
                当前回复为空~
            </div>
        </div>
         <div v-if="info.isBuy == 'y'" class="comment">
              <!-- <img src="" alt=""> -->
              <div class="bg"><input v-model="content" type="text" placeholder="不会显胖哦~"></div>
              
              <div @click="submitBtn" class="send">发送</div>
          </div>
    </div>
</template>
<script>
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
    name:"ask-detail",
    data(){
        return{
            parentId:'',
            content:'',
            id:'',
            info:'',
            avatar:require('../../images/icon-wepay.png'),
            askArr:[]
        }
    },
    mounted(){
        let { id}= this.$router.currentRoute.query;
        this.id = id
        this.getDetail()
    },
    methods:{
        getDetail() {
            let url = CONSTANT.LIST.askEveryoneByid;
            common.get(url, this.id, res => {
                if (res.code == 200) {
                    let data = res.data.bussData;
                    this.info = data;
                    this.getAskList(data.id,data.productCode)
                }
            });
        },
        getAskList(id,productCode) {
            this.$vux.loading.show({
                text: "加载中"
            });
            let param = {
                isDisable:'n',  
                pageIndex: 1,
                pageSize: 1000,
                productCode:productCode,
                parentId:id
            };
            let url = CONSTANT.LIST.ASKPAGE;
            common.post(url, param, res => {
                this.$vux.loading.hide();
                if (res.code == 200) {
                    this.askArr = res.data.bussData
                }
            });
        },
        submitBtn() {
            if(this.state) return
            this.$vux.loading.show({
                text: "提交中"
            });
            this.state = true
            let param = {
                content: this.content,
                parentId:this.id
            };
            let url = CONSTANT.LIST.replyAsk;
            common.post(url, param, res => {
                this.$vux.loading.hide();
                this.state = false
                if (res.code == 200) {
                    this.$vux.toast.show({
                        text: "发送成功"
                    });
                    this.content = ''
                    this.getAskList()
                }else {
                    this.$vux.toast.show({
                        type: "cancel",
                        text: res.data.errMsg
                    });
                }
            });
        },
    }
    
}
</script>
<style lang="less">
.askPeople_detail{
    position: relative;
    padding: 0;
    background-color: RGBA(250, 250, 250, 1);
    .no-data {
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        color: rgba(153, 153, 153, 1);
        margin-top: 40%;
    }
    .question{
        position: relative;
        box-sizing: border-box;
        padding: .37rem .3rem .36rem .3rem;
        margin-bottom: .1rem;
        background-color: rgba(255, 255, 255, 1);
        .ask-qt{
            display: flex;
            width: 100%;
            margin-bottom: .36rem;
            .ask-icon{
                display: inline-block;
                width:.3rem;
                height:.3rem;
                background:rgba(126, 86, 198, 1);
                border-radius:.04rem;
                font-size:.18rem;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:.3rem;
                text-align: center;
                margin-right: .21rem;
                transform: translateY(0.12rem);
            }    
            .ask-word{
            font-size:.3rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
        }
         .ask-time{
            height:.23rem;
            font-size:.24rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(188,188,188,1);
          }
    }
    .answer{
        position: relative;
        padding: .3rem 0  .44rem .26rem;
        background-color: #fff;
        margin-bottom: .2rem;
        &:last-child{
            margin-bottom: 1rem;
        }
        
        .userinfo{
            display: flex;
            flex-direction: row;
            margin-bottom: .48rem;
            .avatar{
                padding-right:.21rem; 
                width:.72rem;
                height:.71rem;
                img{
                    width:.72rem;
                    height:.71rem;
                    border-radius:50%;
                    background-size: cover;
                }

            }
            .user-desc{
                flex: 1;
                .user-name{
                    box-sizing: border-box;
                    height:.31rem;
                    font-size:.32rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    line-height: .31rem;
                    margin-bottom: .14rem;
                }
                .user-time{
                    height:.16rem;
                    font-size:.2rem;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                    line-height: .16rem;
                }

            }
        }
        .usercontent{
          
           font-size:.26rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:.40srem;
        }
    }
    .comment{
        position: fixed;
        bottom: 0;
        width:7.5rem;
        height:.98rem;
        background:rgba(255,255,255,1);
        border:.01rem solid rgba(218, 218, 218, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        .bg{
            width:5.64rem;
            height:.66rem;
            background:rgba(218, 218, 218, 1);
            opacity:0.8;
            border-radius:33px;
            margin: .16rem .18rem .16rem .24rem;
            display: flex;
            align-items: center;
            input{
                appearance: none;
                border: none;
                background: transparent;
                padding: 0;
                margin-left:.32rem; 
                font-size:.26rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);
            }
        }
        .send{
            box-sizing: border-box;
            z-index: 3;
            width:1.2rem;
            height:.66rem;
            background:rgba(126,86,198,1);
            border-radius:.33rem;
            font-size:.26rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:.66rem;
            text-align: center;
        }

    }
}

</style>
